<template>
	<view class="user-layout page-bg" :style="{paddingTop: getNavBarHeight() + 'px'}">
		<view class="user-info">
			<view class="avatar">
				<image src="/static/xxmLogo.png"></image>
			</view>
			<view class="ip">{{ userInfo.IP }}</view>
			<view class="address">来自: {{ userInfo.address.province + userInfo.address.city }}</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="row" v-for="item in sectionTop" :key="item" @click="handleNavigator(item)">
					<view class="left">
						<uni-icons :type="item.icon" size="22"></uni-icons>
						<text class="text">{{item.name}}</text>
					</view>
					<view class="right">
						<text>{{item.number}}</text>
						<uni-icons type="right" size="20" color="#aaa"></uni-icons>
					</view>
				</view>
				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="22"></uni-icons>
						<text class="text">联系客服</text>
						<!-- #ifdef MP -->
						<button open-type="contact">联系客服</button>
						<!-- #endif -->
						<!-- #ifndef MP -->
						<button open-type="contact" @click="clickContact">拨打电话</button>
						<!-- #endif -->
					</view>
					<view class="right">
						<uni-icons type="right" size="20" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="row" v-for="item in sectionBottom" :key="item" @click="handleNavigator(item)">
					<view class="left">
						<uni-icons :type="item.icon" size="22"></uni-icons>
						<text class="text">{{item.name}}</text>
					</view>
					<view class="right">
						<text>{{item.number}}</text>
						<uni-icons type="right" size="20" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getNavBarHeight
	} from '@/utils/system.js'
	import {
		reqUserInfo
	} from '@/apis/user.js'

	let sectionTop = ref([{
			name: '我的下载',
			url: '/pages/classlist/classlist?name=我的下载&type=download',
			icon: 'download-filled',
			number: 10
		},
		{
			name: '我的评分',
			url: '/pages/classlist/classlist?name=我的评分&type=score',
			icon: 'star-filled',
			number: 5
		}
	])
	let sectionBottom = ref([{
			name: '订阅更新',
			url: '/pages/notice/notice?id=6536358ce0ec19c8d67fbe82',
			icon: 'notification-filled'
		},
		{
			name: '常见问题',
			url: '/pages/notice/notice?id=65361e318b0da4ca084e3ce0',
			icon: 'flag-filled'
		}
	])
	let userInfo = ref({
		IP: '获取中...',
		address: {}
	})
	
	let clickContact = () => {
		// 拨打电话
		uni.makePhoneCall({
			phoneNumber: '15290403692' //仅为示例
		});
	}

	onMounted(async () => {
		uni.showLoading({
			title: '获取中'
		})
		const {
			data
		} = await reqUserInfo().finally(() => {
			uni.hideLoading()
		})
		userInfo.value = data
		sectionTop.value[0].number = data.downloadSize
		sectionTop.value[1].number = data.scoreSize
	})

	// 处理点击跳转
	const handleNavigator = (item) => {
		// 编程式导航
		uni.navigateTo({
			url: item.url
		})
	}
</script>

<style lang="scss" scoped>
	.user-layout {
		.user-info {
			text-align: center;
			padding-top: 40rpx;

			.avatar {
				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 50%;
				}
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				margin: 30rpx 0 10rpx 0;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		.section {
			margin: 50rpx 30rpx;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 0 10rpx #efefef;
			border: 1px solid #efefef;

			.row {
				padding: 0 10rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 100rpx;
				border-bottom: 1px solid #efefef;

				.left {
					display: flex;
					align-items: center;
					padding-left: 6rpx;
					position: relative;

					:deep(.uni-icons) {
						color: $brand-theme-color !important;
					}

					text {
						margin-left: 20rpx;
						color: #666;
					}

					button {
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
						width: 670rpx;
						height: 100rpx;
					}
				}

				.right {
					color: #999;
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>